﻿<%@ Control Language="C#" AutoEventWireup="true" CodeBehind="VideoLightbox.ascx.cs" Inherits="GUI.Controls.Video.VideoLightbox" %>
<div class="lb-background">
    <div class="lb-inner">
        <table class="lb-layout">
            <tr>
                <th id="lb-video-embed" class="lb-layout-left">
                </th>
                <td class="lb-layout-right">
                    <div class="clearfix lb-right">
                        <h1 id="lb-video-title" class="lb-video-title">
                            Video title</h1>
                        <p id="lb-video-description" class="lb-video-sapo">
                            video sapo</p>
                        <div class="lb-video-tags mgt5">
                            Tags: <span id="lb-video-tags"></span>
                        </div>
                        <div class="lb-video-social clearfix">
                            <span id="lb-video-share" class="fl mgr5"></span><span id="lb-video-like" class="fl lb-video-like"></span>
                        </div>
                        <div class="clearfix" id="mingid_comments_content">
                        </div>
                    </div>
                </td>
            </tr>
        </table>
        <a class="lb-close" title="close"></a>
    </div>
    <div class="clearfix lb-bottom">
        <div class="vdtool clearfix">
            <div class="fl">
                <ul class="lb-zones clearfix">
                    <asp:Literal runat="server" ID="ltrZones"></asp:Literal>
                </ul>
            </div>
            <a id="lb-toggle-slide" class="fr sprite-video  videorowdown"></a>
        </div>
        <div class="lb-slide">
            <ul class="clearfix" id="lb-slide">
            </ul>
            <a class="lb-slide-nav nav-prev"></a><a class="lb-slide-nav nav-next"></a>
        </div>
    </div>
</div>
<script type="text/javascript">

    var resizeLightboxZones = function () {
        var diff = getViewPortWidth() - 1024;
        var currentPadding = 6;
        if (diff > 0) {
            currentPadding += diff / 33;
            $('.lb-zones li a').css({ "padding-left": currentPadding + 'px', "padding-right": currentPadding + 'px' });
        }
    };
    resizeLightboxZones();
    $(window).resize(resizeLightboxZones);

    $('.lb-background').bind('click', sohavideo.closeLightbox);
    $('.lb-inner, .lb-bottom').hover(
        function () {
            $(this).closest('.lb-background').unbind('click');
        },
        function () {
            $(this).closest('.lb-background').bind('click', sohavideo.closeLightbox);
        }
    );
    $('.lb-close').click(sohavideo.closeLightbox);
    var closeLightboxSlideInterval;
    var hasData = ($('#lb-slide').html() == '');
    $('.lb-bottom').hover(
        function () {
            if (!hasData) {
                var currentZone = $('.lb-zones li.current a');
                if (currentZone.length > 0) {
                    currentZone.click();
                }
            }
            if (hasData) {
                clearInterval(closeLightboxSlideInterval);
                $('#lb-toggle-slide').addClass('videorowup');
                $(this).animate({ height: 157 }, function () { $('#lb-toggle-slide').addClass('videorowup'); });
            }

        },
        function () {
            clearInterval(closeLightboxSlideInterval);
            closeLightboxSlideInterval = setInterval(function () {
                $('.lb-bottom').animate({ height: 49 }, function () { $('#lb-toggle-slide').removeClass('videorowup'); });
            }, 1000);


        });

    $('.lb-zones a').click(function (event) {
        event.preventDefault();
        hasData = true;
        var viewMoreUrl = $(this).attr("href");
        var zoneId = parseInt($(this).attr('rel'));
        var handler = $(this).closest('li');
        sohavideo.loadNewVideoForLightbox(zoneId, 1, 16, function () {
            $('.lb-zones li.current').removeClass('current');
            handler.addClass('current');
        },viewMoreUrl);
    });
</script>
